<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar">
    <table>
        <tbody>
        <tr>
            <td>Outline</td>
            <td>
                <input type="range" min="0.0" max="8.0" step="0.01" data-bind="value: outlineWidth, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: outlineWidth">
            </td>
        </tr>
        <tr>
            <td>Scale</td>
            <td>
                <input type="range" min="0.1" max="20.0" step="0.01" data-bind="value: scale, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: scale">
            </td>
        </tr>
        <tr>
            <td class="header">Outline Color</td>
        </tr>
        <tr>
            <td>Color</td>
            <td><select data-bind="options: outlineColors, value: outlineColor"></select></td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var initCesium = new InitCesium();

    function getColor(colorName, alpha) {
        var color = Cesium.Color[colorName.toUpperCase()];
        return Cesium.Color.fromAlpha(color, parseFloat(alpha));
    }

    var viewer = initCesium.initViewer('cesiumContainer');

    // The viewModel tracks the state of our mini application.
    var viewModel = {
        outlineWidth: 1.0,
        scale: 1.0,
        outlineColor: 'Red',
        outlineColors: ['Red', 'Green', 'Blue', 'Yellow', 'Gray', 'Black']
    };

    // Convert the viewModel members into knockout observables.
    Cesium.knockout.track(viewModel);
    // Bind the viewModel to the DOM elements of the UI that call for it.
    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);

    // Create a label collection with two labels
    var labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
    var label = labels.add({
        position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
        text: 'Philadelphia',
        fillColor: Cesium.Color.WHITE,
        outlineColor: getColor(viewModel.outlineColor, 1.0),
        font: '48px Calibri',
        outlineWidth: 1.0,
        scale: viewModel.scale,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE
    });

    var morgantown = labels.add({
        position: Cesium.Cartesian3.fromDegrees(-79.9559, 39.6295),
        text: 'Morgantown',
        fillColor: Cesium.Color.YELLOW,
        font: '24px Calibri',
        outlineColor: Cesium.Color.BLUE,
        outlineWidth: 2.0,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE
    });

    Cesium.knockout.getObservable(viewModel, 'outlineWidth').subscribe(function(newValue) {
        label.outlineWidth = parseFloat(newValue);
    });

    Cesium.knockout.getObservable(viewModel, 'scale').subscribe(function(newValue) {
        label.scale = parseFloat(newValue);
    });

    Cesium.knockout.getObservable(viewModel, 'outlineColor').subscribe(function(newValue) {
        label.outlineColor = getColor(newValue, 1.0);
    });

    var outlineDelta = 0.1;
    var fontDelta = -1.0;
    var fontSize = 48.0;
    var minFontSize = 1.0;
    var maxFontSize = 48.0;

    viewer.scene.preUpdate.addEventListener(function(scene, time) {
        morgantown.outlineWidth += outlineDelta;
        if (morgantown.outlineWidth >= 4.0 || morgantown.outlineWidth <= 0.0) {
            outlineDelta *= -1.0;
        }

        fontSize += fontDelta;
        if (fontSize >= maxFontSize || fontSize <= minFontSize) {
            fontDelta *= -1.0;
        }
        morgantown.font = fontSize + 'px Calibri';
    });


</script>
</body>
</html>